<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<title>我的伙伴</title>
		<link rel="stylesheet" th:href="@{/css/jquery.mobile-1.4.5.min.css }"/>
		<script th:src="@{/js/jquery.min.js}"></script>
		<script th:src="@{/js/jquery.mobile-1.4.5.min.js}"></script>
		<link rel="stylesheet" th:href="@{/css/iconfont.css}"/>
		<style>
			#gridA_1 .ui-block-a{
				width: 20%;
			}
			#gridA_1 .ui-grid-a .ui-block-b{
				width: 80%;
			}
			#gridA_2 .ui-block-a{
				width: 45%;
			}
			#gridA_2 .ui-block-b{
				width: 55%;
			}
			#lv3 .ui-grid-a .ui-block-a{
				width: 80%;
			}
			#lv3 .ui-grid-a .ui-block-b{
				width: 20%;
			}
			#lv4 .ui-grid-b .ui-block-a{
				width: 20%;
			}
			#lv4 .ui-grid-b .ui-block-b{
				width: 60%;
			}
			#lv4 .ui-grid-b .ui-block-c{
				width: 20%;
			}
			#lv4 .ui-grid-a .ui-block-a{
				width: 20%;
			}
			#lv4 .ui-grid-a .ui-block-b{
				width: 80%;
			}
			#lv4 .ui-grid-a .ui-block-b p{
				width: 100% !important;
				float: left !important;
				overflow: hidden !important;
				text-overflow: ellipsis !important;
				white-space: normal !important;
			}
			#div5 .ui-block-a{
				width: 90%;
			}
			#div5 .ui-block-b{
				width: 10%;
			}
			#div5 .ui-block-a p{
				width: 100% !important;
				float: left !important;
				overflow: hidden !important;
				text-overflow: ellipsis !important;
				white-space: normal !important;
			}
			
			
		</style>
		<style>
			.ui-icon-guiji:after{
				background:url('/image/guiji.png') no-repeat 0px 0px;
			}
			.ui-icon-partners:after{
				background:url(/image/paetners.png) no-repeat 0px 0px;
			}
			.ui-icon-my:after{
				background:url(/image/my.png) no-repeat 0px 0px;
			}
			.ui-icon-zhanghao:after{
				background:url(/image/zhanghao.png) no-repeat 0px 0px;
			}
			.ui-icon-about:after{
				background:url(/image/about.png) no-repeat 0px 0px;
			}
		</style>
		<script type="text/javascript">
			$(document).ready(function(){
				window.sessionStorage.removeItem("EXbase64");
				window.sessionStorage.removeItem("Bbase64");
				window.sessionStorage.removeItem("Sbase64");
				var user=JSON.parse(sessionStorage.getItem("user"));
				var userid=user.userid;
				var data={"userid" : userid};
				$.post("/UserController/getPartners",data, function (result) {
					var oData = eval(result);
					var userhead ="<img src='"+oData[0].userhead+"' width='100%' style='border-radius:100%;'/>";
					var name = "<h1>"+oData[0].name+"</h1>"
					var tel = "<img src='/image/tel.png' width='15%'/>"+oData[0].tel;
					var email = "<img src='/image/email.png' width='15%'/>"+oData[0].email;
					$("#userhead").html(userhead);
					$("#name").html(name)
					$("#tel").html(tel);
					$("#email").html(email)
					$("#lv1").trigger("create").listview("refresh");
				});
				$.post("/ExperiecneCotroller/getExperienceByUserid",data, function (result) {
					var oData = eval(result);
					var markup ='';
					$.each(oData,function(i){
						var eImage=oData[i].eImage;
						markup += "<li><div class='ui-grid-a'><div class='ui-block-a'>";
						markup += "<div class='ui-bar ui-bar-c'><p>"+oData[i].createtime+"</p></div></div>";
						markup += "<div class='ui-block-b'><div class='ui-bar ui-bar-c'><img src='/image/delete.png' width='100%' onclick='deleteEx("+oData[i].eid+")'/></div></div></div>";
						markup += "<div class='ui-grid-solo'><div class='ui-block-a'>";
						markup += "<div class='ui-bar ui-bar-c'><p>"+oData[i].eTitle+"</p>";
						if(eImage!=null&&eImage!=""){
							markup += "<div class='ui-grid-solo'> <div class='ui-block-a'>";
							markup += "<div class='ui-bar ui-bar-c'>";
							markup += "<img src='"+oData[i].eImage+"' style='width:150px;'/></div></div></div>";
						}
						markup += "<div class='ui-grid-c'><div class='ui-block-a'><div class='ui-bar ui-bar-c'>";
						markup += "<span class='iconfont icon-pinglun'>"+oData[i].comment_points+"</div></div>";
						markup += "	<div class='ui-block-b'><div class='ui-bar ui-bar-c'> </div></div>";
						markup += "	<div class='ui-block-c'><div class='ui-bar ui-bar-c'> </div></div>";
						markup += "<div class='ui-block-d'>";
						markup += "<div class='ui-bar ui-bar-c'>";
						markup += "<span id='praise' class='iconfont icon-dianzan'> "+oData[i].praise_points;
						markup += "</div></div>";
						markup += "</li>";
					});
					$("#lv3").html(markup);
					$("#lv3").trigger("create").listview("refresh");
				});
				$.post("/BookController/getBookByUid",data, function (result) {
					var oData = eval(result);
					var markup ='';
					$.each(oData,function(i){
						markup += "<li><div class='ui-grid-b'><div class='ui-block-a'><div class='ui-bar ui-bar-c'><img src='"+oData[i].bImage+"' width='100%'/>";
						markup += "</div></div><div class='ui-block-b'><div class='ui-bar ui-bar-c'>";
						markup += "<h1>"+oData[i].bName+"</h1>";
						markup += "<p>"+oData[i].createtime+"</p></div></div>";
						markup += "<div class='ui-block-c'><div class='ui-bar ui-bar-c'>";
						markup += "<img src='/image/delete.png' width=100% onclick='deleteB("+oData[i].bid+");'></div></div></div>";
						markup += "<div class='ui-grid-a'><div class='ui-block-a'></div><div class='ui-block-b'>"
						markup += "<p>"+oData[i].introduce+"</p>"
						markup += "</div></div></li>";
					});
					$("#lv4").html(markup);
					$("#lv4").trigger("create").listview("refresh");
				});
				$.post("/ShowMeController/getShowByUserid",data, function (result) {
					var oData = eval(result);
					var div5_lv1 ='';
					var div5_lv2 ='';
					var div5_lv3 ='';
					var div5_lv4 ='';
					var div5_lv5 ='';
					var div5_lv6 ='';
					$.each(oData,function(i){
						var sType=oData[i].sType;
						if(sType==1){
							div5_lv1 +='<li><div class="ui-grid-a"><div class="ui-block-a">';
							div5_lv1 += '<h1>'+oData[i].sTitle+'</h1>';
							div5_lv1 += '<p>'+oData[i].sContent+'</p>';
							div5_lv1 += '</div>';
							div5_lv1 += '<div class="ui-block-b"><img src="/image/delete.png" width="100%" onclick="deleteS('+oData[i].sid+')"></div></div>';
							var sImage=oData[i].sImage;
							if(sImage!=null){
								div5_lv1 += '<div class="ui-bar ui-bar-c">';
								div5_lv1 += '<img  src="'+sImage+'" width="100%"/>';
								div5_lv1 += '</div>';
							}
							div5_lv1 += '</li>';
							dv1.style.display = "block";
						}
						if(sType==2){
							div5_lv2 +='<li><div class="ui-grid-a"><div class="ui-block-a">';
							div5_lv2 += '<h1>'+oData[i].sTitle+'</h1>';
							div5_lv2 += '<p>'+oData[i].sContent+'</p>';
							div5_lv2 += '</div>';
							div5_lv2 += '<div class="ui-block-b"><img src="/image/delete.png" width="100%" onclick="deleteS('+oData[i].sid+')"></div></div>';
							var sImage=oData[i].sImage;
							if(sImage!=null){
								div5_lv2 += '<div class="ui-bar ui-bar-c">';
								div5_lv2 += '<img  src="'+sImage+'" width="100%"/>';
								div5_lv2 += '</div>';
							}
							div5_lv2 += '</li>';
							dv2.style.display = "block";
						}
						if(sType==3){
							div5_lv3 +='<li><div class="ui-grid-a"><div class="ui-block-a">';
							div5_lv3 += '<h1>'+oData[i].sTitle+'</h1>';
							div5_lv3 += '<p>'+oData[i].sContent+'</p>';
							div5_lv3 += '</div>';
							div5_lv3 += '<div class="ui-block-b"><img src="/image/delete.png" width="100%" onclick="deleteS('+oData[i].sid+')"></div></div>';
							var sImage=oData[i].sImage;
							if(sImage!=null){
								div5_lv3 += '<div class="ui-bar ui-bar-c">';
								div5_lv3 += '<img  src="'+sImage+'" width="100%"/>';
								div5_lv3 += '</div>';
							}
							div5_lv3 += '</li>';
							dv3.style.display = "block";
						}
						if(sType==4){
							div5_lv4 +='<li><div class="ui-grid-a"><div class="ui-block-a">';
							div5_lv4 += '<h1>'+oData[i].sTitle+'</h1>';
							div5_lv4 += '<p>'+oData[i].sContent+'</p>';
							div5_lv4 += '</div>';
							div5_lv4 += '<div class="ui-block-b"><img src="/image/delete.png" width="100%" onclick="deleteS('+oData[i].sid+')"></div></div>';
							var sImage=oData[i].sImage;
							if(sImage!=null){
								div5_lv4 += '<div class="ui-bar ui-bar-c">';
								div5_lv4 += '<img  src="'+sImage+'" width="100%"/>';
								div5_lv4 += '</div>';
							}
							div5_lv4 += '</li>';
							dv4.style.display = "block";
						}
						if(sType==5){
							div5_lv5 +='<li><div class="ui-grid-a"><div class="ui-block-a">';
							div5_lv5 += '<h1>'+oData[i].sTitle+'</h1>';
							div5_lv5 += '<p>'+oData[i].sContent+'</p>';
							div5_lv5 += '</div>';
							div5_lv5 += '<div class="ui-block-b"><img src="/image/delete.png" width="100%" onclick="deleteS('+oData[i].sid+')"></div></div>';
							var sImage=oData[i].sImage;
							if(sImage!=null){
								div5_lv5 += '<div class="ui-bar ui-bar-c">';
								div5_lv5 += '<img  src="'+sImage+'" width="100%"/>';
								div5_lv5 += '</div>';
							}
							div5_lv5 += '</li>';
							dv5.style.display = "block";
						}
						if(sType==6){
							div5_lv6 +='<li><div class="ui-grid-a"><div class="ui-block-a">';
							div5_lv6 += '<h1>'+oData[i].sTitle+'</h1>';
							div5_lv6 += '<p>'+oData[i].sContent+'</p>';
							div5_lv6 += '</div>';
							div5_lv6 += '<div class="ui-block-b"><img src="/image/delete.png" width="100%" onclick="deleteS('+oData[i].sid+')"></div></div>';
							var sImage=oData[i].sImage;
							if(sImage!=null){
								div5_lv6 += '<div class="ui-bar ui-bar-c">';
								div5_lv6 += '<img  src="'+sImage+'" width="100%"/>';
								div5_lv6 += '</div>';
							}
							div5_lv6 += '</li>';
							dv6.style.display = "block";
						}
						// markup += "<li><a href='"+oData[i].uri+"' style='background-color:rgba(0,0,255,0);' data-ajax='false'>"+oData[i].newid+"."+oData[i].name+"</a></li>";
						// markup += "<li><a href='"+oData[i].uri+"'><img src='"+oData[i].phone+"' style='padding-top: 10px;margin-left: 10px;'/><h2>"+oData[i].title+"</h2><p>"+oData[i].content+"</p><p class='ui-li-aside'><strong>"+oData[i].time+"</strong></p></a></li>";
					});
					$("#div5_lv1").html(div5_lv1);
					$("#div5_lv2").html(div5_lv2);
					$("#div5_lv3").html(div5_lv3);
					$("#div5_lv4").html(div5_lv4);
					$("#div5_lv5").html(div5_lv5);
					$("#div5_lv6").html(div5_lv6);
					// $("#lv1").html(markup);
					$("#div5_lv1").trigger("create").listview("refresh");
					$("#div5_lv2").trigger("create").listview("refresh");
					$("#div5_lv3").trigger("create").listview("refresh");
					$("#div5_lv4").trigger("create").listview("refresh");
					$("#div5_lv5").trigger("create").listview("refresh");
					$("#div5_lv6").trigger("create").listview("refresh");
				});
			});
			function guiji(){
				var lv3 = document.getElementById("lv3");
				var lv4 = document.getElementById("lv4");
				var div5 = document.getElementById("div5");
				$("#jian").removeClass("iconfont icon-jian2");
				$("#jian").addClass("iconfont icon-jian");
				$("#zuji").removeClass("iconfont icon-zuji2");
				$("#zuji").addClass("iconfont icon-zuji");
				$("#guiji").removeClass("iconfont icon-guiji");
				$("#guiji").addClass("iconfont icon-guiji2");
				lv3.style.display = "block";
				lv4.style.display = "none";
				div5.style.display = "none";
			}
			function jian(){
				var lv3 = document.getElementById("lv3");
				var lv4 = document.getElementById("lv4");
				var div5 = document.getElementById("div5");
				$("#guiji").removeClass("iconfont icon-guiji2");
				$("#guiji").addClass("iconfont icon-guiji");
				$("#zuji").removeClass("iconfont icon-zuji2");
				$("#zuji").addClass("iconfont icon-zuji");
				$("#jian").removeClass("iconfont icon-jian");
				$("#jian").addClass("iconfont icon-jian2");
				lv3.style.display = "none";
				div5.style.display = "none";
				lv4.style.display = "block";
			}
			function zuji(){
				var lv3 = document.getElementById("lv3");
				var lv4 = document.getElementById("lv4");
				var div5 = document.getElementById("div5");
				$("#guiji").removeClass("iconfont icon-guiji2");
				$("#guiji").addClass("iconfont icon-guiji");
				$("#jian").removeClass("iconfont icon-jian2");
				$("#jian").addClass("iconfont icon-jian");
				$("#zuji").removeClass("iconfont icon-zuji");
				$("#zuji").addClass("iconfont icon-zuji2");
				lv3.style.display = "none";
				lv4.style.display = "none";
				div5.style.display = "block";
			}
			function deleteEx(eid){
				var data={"eid" : eid};
				$.post("/ExperiecneCotroller/deleteEx",data, function (result) {
					if(result = "success"){
						console.log("删除成功");
						window.location.reload();
					}else{
						console.log("删除失败");
					}
				});
			}
			function deleteB(bid){
				var data={"bid" : bid};
				$.post("/BookController/deleteB",data, function (result) {
					if(result = "success"){
						console.log("删除成功");
						window.location.reload();
					}else{
						console.log("删除失败");
					}
				});
			}
			function deleteS(sid){
				var data={"sid" : sid};
				$.post("/ShowMeController/deleteS",data, function (result) {
					if(result = "success"){
						console.log("删除成功");
						window.location.reload();
					}else{
						console.log("删除失败");
					}
				});
			}
			function addEx(){
				var user=JSON.parse(sessionStorage.getItem("user"));
				var userid=user.userid;
				if(userid==null||userid==""){
					$("#pleaseLogin").popup('open');
				}else{
					window.location = "/ViewController/toAdd";
				}
			}
			function goZhanshi(){
				var user=JSON.parse(sessionStorage.getItem("user"));
				var userid=user.userid;
				if(userid==null||userid==""){
					$("#pleaseLogin").popup('open');
				}else{
					window.location = "/UserController/getPartnersNoMe?userid="+userid;
				}
			}
			</script>
	</head>
	
	<body>
		<div data-role = "page">
			<div data-role = "header"  data-fullscreen = "true">
				<a  href="/ViewController/goUserPanel2" data-icon = "zhanghao" data-ajax = "false"  >账号</a>
				<h1>我的</h1>
				<a href="/ViewController/goAbout" data-icon = "about" data-ajax = "false">关于</a>
			</div>
			<div data-role = "content">
			<ul data-role = "listview" class="lv1" id="lv1" style="margin-bottom:30px;">
				<li>
				<div class="ui-grid-a" id="gridA_1">
					<div class="ui-block-a">
						<div class="ui-bar ui-bar-c" id="userhead">
							
						</div>
					</div>
					<div class="ui-block-b">
						<div class="ui-bar ui-bar-c" id="name">
							<!-- <h1>132</h1>
							<p>时间</p> -->
						</div>
					</div>
				</div>
				<div class="ui-grid-a" id="gridA_2">
					<div class="ui-block-a">
						<div id="tel">
							
						</div>
					</div>
					<div class="ui-block-b">
						<div  id="email">
							<!-- <h1>132</h1>
							<p>时间</p> -->
						</div>
					</div>
				</div>
				</li>
				</ul>
				
				<ul data-role = "listview" class="lv2" id="lv2" style="margin-bottom:10px;">
					<li>
						<div class="ui-grid-b">
							<div class="ui-block-a">
								<div class="ui-bar ui-bar-c">
									<span id="guiji" class="iconfont icon-guiji2" onclick="guiji()">轨迹</span>
								</div>
							</div>
							<!-- <div class="ui-block-b">
								<div class="ui-bar ui-bar-c">
									
								</div>
							</div> -->
							<div class="ui-block-b">
								<div class="ui-bar ui-bar-c">
									<span id="jian" class="iconfont icon-jian" onclick="jian()">推荐</span>
								</div>
							</div>
							<!-- <div class="ui-block-d">
								<div class="ui-bar ui-bar-c" >
									
									
								</div>
							</div> -->
							<div class="ui-block-c">
								<div class="ui-bar ui-bar-c">
									<span id="zuji" class="iconfont icon-zuji" onclick="zuji()">展示</span>
								</div>
							</div>
						</div>
					</li>
					
				</ul>
				<ul data-role = "listview" id="lv3"></ul>
				<ul data-role = "listview" id="lv4" style="display:none">
					<!-- <li>
						<div class = "ui-grid-a">
							<div class="ui-block-a">
							<img src="image/logo.png" width="100%"/>
							</div>
							<div class="ui-block-b">
							<h1>《三体》</h1>
							<p>时间</p>
							</div>
						</div>
					</li> -->
					<!-- <li><div class="ui-grid-b">
					<div class="ui-block-a">
						<div class="ui-bar ui-bar-c">
							<img src="img/santi.jpeg" width="100%"/>";
						</div>
					</div>
					<div class="ui-block-b">
						<div class="ui-bar ui-bar-c">
							<h1>三体</h1>
							<p>时间</p>
						</div>
					</div>
					<div class="ui-block-c">
						<div class="ui-bar ui-bar-c">
						<img src="image/delete.png" width="100%"/>
						</div>
					</div>
					</div>
					<div class="ui-grid-a"><div class='ui-block-a'></div><div class='ui-block-b'>
					<p>内容</p>
					</div></div></li> -->
				</ul>
				<div id="div5" style="display:none">
					<div data-role = "collapsible-set" id="dv1" style="display:none">
						<div data-role = "collapsible">
							<h3>上学前</h3>
							<ul data-role = "listview" id="div5_lv1">
								<!-- <li>
								<h1>我的初中校园</h1>
								<p>我初中时期印象最深的就是我们美丽下校园</p>
								<div class="ui-bar ui-bar-c">
									<img  src="image/20155516431932.jpg" width="100%"/>
								</div>
								</li> -->
								
							</ul>
						</div>
					</div>
					
					<div data-role = "collapsible-set" id="dv2" style="display:none">
						<div data-role = "collapsible">
							<h3>幼儿园</h3>
							<ul data-role = "listview" id="div5_lv2">
								<!-- <li>
								<h1>我的初中校园</h1>
								<p>我初中时期印象最深的就是我们美丽下校园</p>
								<div class="ui-bar ui-bar-c">
									<img  src="image/20155516431932.jpg" width="100%"/>
								</div>
								</li> -->
								
							</ul>
						</div>
					</div>
					
					<div data-role = "collapsible-set" id="dv3" style="display:none">
						<div data-role = "collapsible">
							<h3>小学</h3>
							<ul data-role = "listview" id="div5_lv3">
								<!-- <li>
								<h1>我的初中校园</h1>
								<p>我初中时期印象最深的就是我们美丽下校园</p>
								<div class="ui-bar ui-bar-c">
									<img  src="image/20155516431932.jpg" width="100%"/>
								</div>
								</li> -->
								
							</ul>
						</div>
					</div>
					
					<div data-role = "collapsible-set" id="dv4" style="display:none">
						<div data-role = "collapsible">
							<h3>初中</h3>
							<ul data-role = "listview" id="div5_lv4">
								<!-- <li>
								<h1>我的初中校园</h1>
								<p>我初中时期印象最深的就是我们美丽下校园</p>
								<div class="ui-bar ui-bar-c">
									<img  src="image/20155516431932.jpg" width="100%"/>
								</div>
								</li> -->
								
							</ul>
						</div>
					</div>
					
					<div data-role = "collapsible-set" id="dv5" style="display:none">
						<div data-role = "collapsible">
							<h3>高中</h3>
							<ul data-role = "listview" id="div5_lv5">
								
							</ul>
						</div>
					</div>
					
					<div data-role = "collapsible-set" id="dv6" style="display:none">
						<div data-role = "collapsible">
							<h3>大学</h3>
							<ul data-role = "listview" id="div5_lv6">
								
							</ul>
						</div>
					</div>
				</div>
			</div>
			<a data-ajax="false" onclick="addEx()"><img src="/image/add.png" style="width: 3rem;height: 3rem;position: fixed;bottom: 4rem;right: 0.5rem;z-index: 9999;" /></a>
			<div data-role = "footer" data-position = "fixed" data-tap-toggle="false">
				<div data-role = "navbar" data-grid = "b">
					<ul>
						<li><a href="/ExperiecneCotroller/getAllExperience" data-icon = "guiji" data-ajax = "false">成长轨迹</a></li>
						<li><a th:onclick="goZhanshi()" data-icon = "partners" data-ajax = "false">伙伴</a></li>
						<li><a data-icon = "my" data-ajax = "false" class="ui-btn-active ui-state-persist">我的</a></li>
					</ul>
				</div>
			</div>
		</div>
	</body>
</html>

